<template>
	<view class="video_play">
		<image :src="videoObj.img" ></image>
		
		<!-- 头部工具栏 -->
		<view class="video_tool">
			<view :class="muted? 'iconfont icon-jingyin':'iconfont icon-shengyin'" @click="mutedPlay"></view>
			<view class="iconfont icon-zhuanfa"><button open-type="share" class=""></button></view>
		</view>
		<!-- 视频 -->
		<view class="video_wrap">
			<video :src="videoObj.video"  :muted='muted' controls objectFit="fill"></video>
		</view>
	<!-- 下载 -->
		<view class="download">
			<view class="download_btn" @click="download">下载高清</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				videoObj: {},
				// 是否静音
				muted: false
			}
		},
		onLoad() {
			this.videoObj = getApp().globalData.video
			
		},
		methods: {
			//开关声音
			mutedPlay() {
				this.muted = !this.muted
			},
			//下载视频
		async	download() {
			await uni.showLoading({
				title: '下载中'
			})
				// 下载内存, 然后内存读取
		const {tempFilePath} = (await	uni.downloadFile({url: this.videoObj.video}))[1]
		await uni.saveVideoToPhotosAlbum({
			filePath: tempFilePath
		})
		uni.hideLoading()
		await uni.showToast({
			title: '下载成功'
		})
			}
		}
	}
</script>

<style lang="less" scoped>
	.video_play {
		position: relative;
	  image {
			position: absolute;
			width: 100vw;
			height: 100vh;
			z-index: -1;
			filter: blur(20px);
	  }
	  .video_tool {
			height: 80rpx;
			display: flex;
			justify-content: flex-end;
			.iconfont {
				width: 80rpx;
				color: #fff;
				font-size: 50rpx;
				border-radius: 40rpx;
				background-color: rgba(0,0,0, .3);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}
			.icon-zhuanfa {
				position: relative;
				button {
					position: absolute;
					width: 100%;
					opacity: 0;
					height: 100%;
				}
			}
	  }
	
	  .video_wrap {
			display: flex;
			justify-content: center;
	    video {
				width: 360rpx;
				height: 600rpx;
	    }
	  }
	
	  .download {
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
	    .download_btn {
				width: 360rpx;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				border: 3rpx solid #fff;
				background-color: rgba(0,0,0, .6);
				opacity: .3;
				&:active {
					opacity: .8;
				}
	    }
	  }
	}
</style>
